<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/views/wx/include/head.jsp" %>
<style>
.mui-row {height:35px !important;padding:6px;background-color:#ffffff;font-size:14px;}
.mui-row a {color:#000000;}
.mui-row .mui-col-sm-4.mui-col-xs-4 {padding:3px;}
.pre-day{border-right:1px solid #ccc;text-align:left;}
.curr-day{border-right:1px solid #ccc;text-align:center;}
.next-day{text-align:right;}
.fix-push-top {margin-top:80px;}

.mui-table-view-cell:after { left: 0px !important;}

.mui-badge { border-radius: 5px;border:1px solid #8f8f94;background-color:#ffffff;color:#8f8f94;padding: 2px 2px;}
.badge-car{ position:absolute;top:35px;left:10px;font-size:8px !important;padding:1px 4px;border-color:#f0ad4e;color:#f0ad4e;}
.badge-way{ position:absolute ; top:4px; left:0px; font-size:8px !important;padding:1px 4px;border-color:#00ADA9;color:#00ADA9;}

.mui-media-object{ line-height: 45px;font-size:18px;width:45px;}
.time{ position:absolute;top:0px;left:10px;}

.addr{ color:#000000;font-size:16px !important;}
.addr-point1{ margin-right:2px;color:#f0ad4e;}
.addr-point2{ margin-right:2px;color:#38B895;}
.money{ position:absolute;top:12px;right:10px;color:#f0ad4e;font-size:18px !important;}
.seats{ position:absolute;top:30px;right:10px;font-size:10px;}

.way {font-size:12px !important;padding-left:40px;}
</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a href="${ctxWx}/pu/realsche/query?boardaddr=${realsche.boardaddr}&boardaddrName=${realsche.boardaddrName}&offaddr=${realsche.offaddr}&offaddrName=${realsche.offaddrName}&departdateStr=${realsche.departdateStr}" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">${realsche.boardaddrName}-${realsche.offaddrName}</h1>
	</header>
	<div class="mui-content">
		<div class="mui-row">
			<div class="mui-col-sm-3 mui-col-xs-3 pre-day">
				<a href="${preUrl }"><i class="icon-angle-left"></i>&nbsp;前一天</a>
			</div>
			<div class="mui-col-sm-6 mui-col-xs-6 curr-day">
				<a href="javascript:;">${departdateWeek }</a>
			</div>
			<div class="mui-col-sm-3 mui-col-xs-3 next-day">
				<a href="${nextUrl }">后一天&nbsp;<i class="icon-angle-right"></i></a>
			</div>
		</div>

		<div id="pullrefresh" class="mui-content mui-scroll-wrapper fix-push-top">
			<div class="mui-scroll">
				<c:choose>
					<c:when test="${not empty page.list}">
						<ul id="view_list" class="mui-table-view">
							<c:forEach items="${page.list}" var="realsche2">
								<li class="mui-table-view-cell mui-media" data-url="${ctxWx}/pu/realsche/details?realscheid=${realsche2.realscheid}&realboardid=${realsche2.realboardid }&realoffid=${realsche2.realoffid }&departdateStr=${realsche.departdateStr }&boardaddrfc=${boardaddrfc}&offaddrfc=${offaddrfc}&ordertype=${realsche.ordertype}">
									<div class="mui-media-object mui-pull-left">
										<span class="time"><fmt:formatDate value="${realsche2.realboardtime }" pattern="HH:mm"/></span>
										<c:if test="${fn:contains(realsche2.schename, '豪华房车')}">
											<span class="mui-badge badge-car">豪华房车</span>
										</c:if>
									</div>
									<div class="mui-media-body ">
										<p class="addr"><span class="addr-point1">•</span>${realsche2.boardaddr}</p>
										<p class="addr"><span class="addr-point2">•</span>${realsche2.offaddr}</p>
										<c:if test="${realsche2.schetype == 2 }">
											<p class="way pos-relative">
												<span class="mui-badge badge-way">往返票</span>
												${realsche2.diffdays==0?'当日':'' }
												${realsche2.diffdays==1?'次日':'' }
												${realsche2.diffdays==2?'后日':'' }
												${realsche2.diffdays==3?'第四日':'' }
												${realsche2.gathertime }从${realsche2.offaddr}返回
											</p>
										</c:if>
										<c:if test="${not empty realsche2.specserv}">
											<p class="way pos-relative">
												<span class="mui-badge badge-way">含服务</span>${realsche2.specserv }
											</p>
										</c:if>
										<c:if test="${not empty realsche2.stopPoint}">
											<p class="way pos-relative">
												<span class="mui-badge badge-way">经停点</span>${realsche2.stopPoint }
											</p>
										</c:if>
										<p class="money">
											<c:choose>
												<c:when test="${!fn:contains(realsche2.retailprice,'.00')}">
													<c:choose>
														<c:when test="${empty realsche2.retailprice }">暂无价格</c:when>
														<c:otherwise>
															<i class="icon-yen"></i>${realsche2.retailprice }
														</c:otherwise>
													</c:choose>
												</c:when>
												<c:otherwise>
													<i class="icon-yen"></i>${fn:substring(realsche2.retailprice, 0, fn:length(realsche2.retailprice)-3)}
												</c:otherwise>
											</c:choose>
										</p>
										<p class="seats">${realsche2.leftSeats}张</p>
									</div>
								</li>
							</c:forEach>
						</ul>
					</c:when>
					<c:otherwise>
						<div class="mui-content-padded text-center">
							<p>
								哎呦喂~没有查到信息
								<img class="no-data-img" src="${ctxStatic }/modules/wx/images/no_data.gif"/>
							</p>
						</div>
					</c:otherwise>
				</c:choose>
			</div>
		</div>
	</div>
	<c:set var="include_history" value="yes"/>
	<%@ include file="/WEB-INF/views/wx/include/script.jsp"%>
	<script src="${ctxStatic}/common/template-native.js" type="text/javascript"></script>
	<script id="view_list_template" type="text/html">
		{{for(var i=0;i<list.length;i++){var realsche=list[i]; }}
		<li class="mui-table-view-cell mui-media" data-url="${ctxWx}/pu/realsche/details?realscheid={{=realsche.realscheid}}&realboardid={{=realsche.realboardid }}&realoffid={{=realsche.realoffid }}&departdateStr=${realsche.departdateStr }&boardaddrfc=${boardaddrfc}&offaddrfc=${offaddrfc}&ordertype=${realsche.ordertype}">
			<div class="mui-media-object mui-pull-left">
				<span class="time">{{=dateFormat(realsche.realboardtime,'hh:mm') }}</span>
				{{if (realsche.schename.indexOf('豪华房车')>=0){ }}
					<span class="mui-badge badge-car" style="">豪华房车</span>
				{{ } }}
			</div>
			<div class="mui-media-body ">
				<p class="addr"><span class="addr-point1">•</span>{{=realsche.boardaddr}}</p>
				<p class="addr"><span class="addr-point2">•</span>{{=realsche.offaddr}}</p>
				{{if(realsche.schetype == 2) { }}
					<p class="way pos-relative">
						<span class="mui-badge badge-way">往返票</span>
						{{if(realsche.diffdays==0){ }}当日{{ } }}
						{{if(realsche.diffdays==1){ }}次日{{ } }}
						{{if(realsche.diffdays==2){ }}后日{{ } }}
						{{if(realsche.diffdays==3){ }}第四日{{ } }}
						{{=realsche.gathertime }}从{{=realsche.offaddr}}返回
					</p>
				{{ } }}
				{{if(realsche.specserv) { }}
					<p class="way pos-relative">
						<span class="mui-badge badge-way">含服务</span>{{=realsche.specserv }}
					</p>
				{{ } }}
				{{if(realsche.stopPoint) { }}
					<p class="way pos-relative">
						<span class="mui-badge badge-way">经停点</span>{{=realsche.stopPoint }}
					</p>
				{{ } }}
				<p class="money">
					{{if (!realsche.retailprice){ }}
						暂无价格
					{{ } else if (realsche.retailprice.indexOf('.00')>0){  }}
						<i class="icon-yen"></i>
						{{=realsche.retailprice.substring(0,realsche.retailprice.length-3)}}
					{{ } else { }}
						<i class="icon-yen"></i>{{=realsche.retailprice}}
					{{ } }}
				</p>
				<p class="seats">{{=realsche.leftSeats}}张</p>
			</div>
		</li>
		{{ } }}
	</script>
	<script>
		template.defaults.openTag = '{{';
		template.defaults.closeTag = '}}';
		template.helper('dateFormat', function (date, format) {
			date = new Date(date);
			var map = {
				"h": date.getHours(), //小时
				"m": date.getMinutes() //分 
			};
			format = format.replace(/([hm])+/g, function(all, t){
				var v = map[t];
				if(v !== undefined){
					if(all.length > 1){
						v = '0' + v;
						v = v.substr(v.length-2);
					}
					return v;
				}
				return all;
			});
			return format;
		});


		// <c:if test="${not empty page.list}">
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				up: {
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		var pageSize = ${page.pageSize};
		var pageNo = ${page.pageNo};
		var end = false; // 停止加载
		/**
		 * 上拉加载具体业务实现
		 */
		function pullupRefresh() {
			if(end) return;
			$.post(window.location.href,{pageSize:pageSize,pageNo:(++pageNo)},function(data){
				mui('#pullrefresh').pullRefresh().endPullupToRefresh(pageNo != data.pageNo);
				if(pageNo == data.pageNo){
					var table = $('#view_list');
					table.append(template('view_list_template', data));
					$('.mui-table-view-cell').on('tap',function(){
						window.location.href = $(this).attr('data-url');
					});
				} else {
					end = true;
				}
			});
		} 
		$(function(){
			$('.mui-table-view-cell').on('tap',function(){
				window.location.href = $(this).attr('data-url');
			});
		});
		// </c:if>
	</script>
</body>
</html>